<template>
  <el-tabs v-model="activeName" style="width: 100%;" type="border-card">
    <el-tab-pane label="基本信息" name="1">
      <el-form
        ref="ruleForm"
        :show-message="false"
        :model="courseForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="课程名称"
          prop="name"
          :rules="[{ required: true, message: '请输入课程名称', trigger: 'blur' }]"
        >
          <el-input v-model="courseForm.name" type="text" placeholder="请输入内容" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="课程概述" prop="remark" :rules="[{ required: true, message: '请输入课程概述', trigger: 'blur' }]">
          <!--富文本-->
          <div ref="tinymce-wrapper" class="tinymce-wrapper" style="height: 350px">
            <tinymce :id="Global.getGuid()" ref="courseTinymce" v-model="courseForm.remark" />
          </div>
        </el-form-item>
        <!--  prop="groups" :rules="[{ required: true, message: '请选择课程分类', trigger: 'blur' }]" -->
        <el-form-item label="课程分类">
          <el-button size="mini" @click="openDialog('type')">选择分类</el-button>
          <el-tag v-for="item in courseForm.groups" :key="item.id" style="margin:0 5px" closable @close="tagClose('type', item)">{{ item.text }}</el-tag>
        </el-form-item>
        <el-form-item label="课程标签" prop="tags" :rules="[{ required: true, message: '请选择课程标签', trigger: 'blur' }]">
          <el-button size="mini" @click="openDialog('tag')">选择标签</el-button>
          <el-tag v-for="item in courseForm.tags" :key="item.id" style="margin:0 5px" closable @close="tagClose('tag', item)">{{ item.text }}</el-tag>
        </el-form-item>
        <el-form-item label="课程封面" prop="picFile" :rules="[{ required: true, message: '请上传课程封面', trigger: 'blur' }]">
          <el-upload
            accept="image/jpeg, image/png"
            :auto-upload="false"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="uploadImgParams.change"
          >
            <img v-if="uploadImgParams.imageUrl" :src="uploadImgParams.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="适用人群" prop="usesTo" :rules="[{ required: true, message: '请输入适用人群', trigger: 'blur' }]">
          <el-input v-model="courseForm.usesTo" type="text" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="学习目标" prop="target" :rules="[{ required: true, message: '请输入学习目标', trigger: 'blur' }]">
          <!--富文本-->
          <div ref="tinymce-wrapper" class="tinymce-wrapper" style="height: 350px">
            <tinymce :id="Global.getGuid()" ref="targetTinymce" v-model="courseForm.target" />
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 10px">
        <button class="save-btn" @click="courseForm.save">保存</button>
      </div>
    </el-tab-pane>
    <el-tab-pane v-if="routeParams.id && !routeParams.id.includes('new_')" label="课程内容" name="2">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="chapter-wrapper">
            <h5>章节目录</h5>
            <button class="save-btn" @click="openNewSection">新建章节</button>
          </div>

          <draggable
            v-model="treeData"
            style="border:1px solid #E4E7ED;min-height:500px;border-top:none"
            chosen-class="compTreeChosen"
            force-fallback="true"
            group="people"
            animation="1000"
            handle=".tuozhuai"
          >
            <transition-group>
              <div
                v-for="el in treeData"
                :key="el.id"
                :class="['compTree', el.active?'active':'']"
                @click="selectBookList(el)"
              >
                <span>{{ el.name }}</span>
                <svg-icon class="tuozhuai" icon-class="icon-tuozhuai" />
              </div>
            </transition-group>
          </draggable>
        </el-col>
        <el-col :span="18">
          <div class="upload-class">
            <button class="save-btn" @click="openUpload">上传课件</button>
          </div>
          <div class="menu-wrapper">
            <div class="menu-list">
              <span>{{ courseForm.list && courseForm.list.name }}</span>
              <span v-if="courseForm.list && courseForm.list.name" class="menu-tool">
                <i class="el-icon-edit-outline" @click="bookListOperate('edit')" />
                <i class="el-icon-error" style="margin-left:10px" @click="bookListOperate('del')" />
              </span>
            </div>
            <ul class="video-list">
              <draggable
                v-model="videoData"
                chosen-class="compTreeChosen"
                force-fallback="true"
                group="people"
                animation="1000"
              >
                <transition-group>
                  <li v-for="item in videoData" :key="item.id" class="video-li">
                    <span>
                      <svg-icon icon-class="icon-video" style="margin-right: 10px" />
                      {{ item.name }}
                    </span>
                    <i class="el-icon-error" style="cursor: pointer;" @click="delBookList(item)" />
                  </li>
                </transition-group>
              </draggable>

            </ul>
          </div>
        </el-col>
      </el-row>
      <div style="text-align: center;margin-top: 10px">
        <button class="save-btn" @click="submit">提交</button>
      </div>
      <!-- 上传课件 -->
      <upload v-if="uploadParams.visible" :params="uploadParams" />
    </el-tab-pane>
    <!-- 新建章节 -->
    <input-dialog v-if="inputDialogParams.visible" ref="input-dialog" :params="inputDialogParams" />
    <!-- 选择分类、标签 -->
    <type-tag v-if="typeTagParams.visible" :params="typeTagParams" />
  </el-tabs>
</template>

<script>
// 引入富文本
import Tinymce from '@/components/Tinymce'
import Global from '@/../public/js/global'
import Upload from '../components/Upload'
// 导入draggable组件
import draggable from 'vuedraggable'
// api
import { addLearnBook, getLearnBook, getLearnGroupList, getLearnTagList, addLearnBookFile, setLearnBook, addBookDetail } from '@/api/learnCenter'
import { getBookListDetail, addBookList, setBookList, delBookList, setBookListSort, delBookDetail, setBookDetailSort } from '@/api/learnCenter'
// utils
import { fileHostUrl } from '@/utils'
// compnents
import TypeTag from '../components/TypeTag'
import InputDialog from '@/components/Dialog/InputDialog'
// that
let that
export default {
  name: 'CourseOperate',
  components: { Tinymce, Upload, TypeTag, InputDialog, draggable },
  data() {
    return {
      activeName: '1',
      Global,
      courseForm: { // 基本信息
        id: '',
        name: '',
        remark: '',
        target: '',
        groups: [],
        groupIDs: [],
        tags: [],
        tagIDs: [],
        usesTo: '',
        picFile: '',
        save: () => that.courseFormSave()
      },
      typeTagParams: { // 选择分类、标签
        visible: false
      },
      uploadImgParams: { // 封面图参数
        imageUrl: '',
        change: (file) => that.uploadMask(file)
      },
      inputDialogParams: { // 新建/修改章节
        visible: false
      },
      treeData: [], // 章节目录
      videoData: [], // 当前章节下的视频数
      allVideoData: [], // 全部视频数
      typeList: [], // 分类
      labelList: [], // 标签
      uploadParams: { // 上传课件
        visible: false,
        percentage: 0
      },
      routeParams: {} // 路由参数
    }
  },
  activated() {
    that = this
    this.activeName = '1'
    this.initWindow()
  },
  methods: {
    async initWindow() {
      // 获取分类/标签
      await this.getTypeList()
      await this.getLabelList()
      // 重置富文本数据
      this.$refs.courseTinymce && this.$refs.courseTinymce.setContent('')
      this.$refs.targetTinymce && this.$refs.targetTinymce.setContent('')
      // 存储路由参数
      this.routeParams = this.$route.params

      if (this.routeParams.id.includes('new_')) { // 增加课程
        this.courseForm = this.$options.data().courseForm // 重置表单
        this.uploadImgParams = this.$options.data().uploadImgParams
        this.treeData = []
        this.videoData = []
      } else { // 修改课程
        this.courseForm.id = this.routeParams.id
        this.getCourseDetail() // 获取课程详情
      }
    },
    // 获取类型列表
    getTypeList() {
      return new Promise((res, rej) => {
        const vPar = new this.ParamArr()
        getLearnGroupList(vPar).then(vPar => {
          const nodes = []
          const table = new this.SQLTable(vPar.getTable('k_learn_group'))
          table.first()
          while (!table.eof()) {
            const node = {}
            node['id'] = table.getValueByName('ID')
            node['pid'] = table.getValueByName('PID')
            node['text'] = table.getValueByName('Name')
            node['iType'] = table.getValueByName('iType')
            nodes.push(node)
            table.next()
          }
          this.typeList = nodes
          res()
        })
      })
    },
    // 获取标签
    getLabelList() {
      return new Promise((res, rej) => {
        const vPar = new this.ParamArr()
        getLearnTagList(vPar).then(vPar => {
          const nodes = []
          const table = new this.SQLTable(vPar.getTable('k_learn_tag'))
          table.first()
          while (!table.eof()) {
            const node = {}
            node['id'] = table.getValueByName('ID')
            node['pid'] = table.getValueByName('PID')
            node['text'] = table.getValueByName('Name')
            node['iType'] = table.getValueByName('iType')
            nodes.push(node)
            table.next()
          }
          this.labelList = nodes
          res()
        })
      })
    },
    // 获取课程详情
    getCourseDetail() {
      const vPar = new this.ParamArr()
      vPar.setStr('ID', this.courseForm.id)
      getLearnBook(vPar).then(vPar => {
        this.courseForm.name = vPar.getStr('Name')
        this.courseForm.remark = vPar.getStr('Remark')
        this.courseForm.target = vPar.getStr('Target')
        this.courseForm.groupIDs = vPar.getStr('GroupIDs').split(',')
        this.courseForm.tagIDs = vPar.getStr('TagIDs').split(',')
        this.courseForm.usesTo = vPar.getStr('UsesTo')
        this.courseForm.picFile = vPar.getStr('PicFile')
        this.uploadImgParams.imageUrl = fileHostUrl + '/' + vPar.getStr('PicFile')
        // 处理分类
        const groupIDs = this.courseForm.groupIDs
        const groups = []
        this.typeList.forEach(it1 => {
          groupIDs.forEach(it2 => {
            if (it1.id === it2) {
              groups.push(it1)
            }
          })
        })
        this.courseForm.groups = groups
        // 处理标签
        const tagIDs = this.courseForm.tagIDs
        const tags = []
        this.labelList.forEach(it1 => {
          tagIDs.forEach(it2 => {
            if (it1.id === it2) {
              tags.push(it1)
            }
          })
        })
        this.courseForm.tags = tags

        // 富文本赋值
        this.$refs.courseTinymce && this.$refs.courseTinymce.setContent(this.courseForm.remark)
        this.$refs.targetTinymce && this.$refs.targetTinymce.setContent(this.courseForm.target)

        // 获取章节
        this.getBookList(vPar)
        // 获取章节视频
        this.getVideoList(vPar)
      })
    },
    // 打开选择分类/标签弹框
    openDialog(type) {
      this.typeTagParams.visible = true
      if (type === 'type') {
        this.typeTagParams.ids = this.courseForm.groupIDs
      } else {
        this.typeTagParams.ids = this.courseForm.tagIDs
      }
      this.typeTagParams.type = type
      this.typeTagParams.title = type === 'type' ? '选择分类' : '选择标签'
      this.typeTagParams.confirm = (nodes) => {
        if (type === 'type') {
          this.courseForm.groups = nodes
          this.courseForm.groupIDs = nodes.map(item => item.id)
        } else {
          this.courseForm.tags = nodes
          this.courseForm.tagIDs = nodes.map(item => item.id)
        }
        this.typeTagParams.visible = false
      }
    },
    // 选择封面文件
    uploadMask(file) {
      file = file.raw
      const isJPGPNG = ['image/jpeg', 'image/png'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPGPNG) {
        return this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        return this.$message.error('上传图片大小不能超过 5MB!')
      }

      // 生成id
      if (!this.courseForm.id) {
        this.courseForm.id = this.Global.getGuid()
      }
      const vPar = new this.ParamArr()
      vPar.setStr('ID', this.courseForm.id)
      vPar.setStr('FileName', file.name)
      addLearnBookFile(vPar, file).then(vPar => {
        this.uploadImgParams.imageUrl = fileHostUrl + '/' + vPar.getStr('ServerFile')
        this.courseForm.picFile = vPar.getStr('ServerFile')
      })
      // 上传到服务器暂存区
      return isJPGPNG && isLt5M
    },
    // 保存课程信息
    courseFormSave() {
      const courseForm = this.courseForm
      if (!courseForm.name) return this.$message.warning('请输入课程名称')
      if (!courseForm.remark) return this.$message.warning('请输入课程概述')
      // if (!courseForm.groupIDs.length) return this.$message.warning('请选择课程分类')
      if (!courseForm.tagIDs.length) return this.$message.warning('请选择课程标签')
      if (!courseForm.picFile) return this.$message.warning('请上传课程封面')
      if (!courseForm.usesTo) return this.$message.warning('请输入适用人群')
      if (!courseForm.target) return this.$message.warning('请输入学习目标')
      if (this.routeParams.id.includes('new_')) { // 新增
        const vPar = new this.ParamArr()
        vPar.setStr('ID', courseForm.id)
        vPar.setStr('Name', courseForm.name)
        vPar.setStr('Remark', courseForm.remark)
        vPar.setStr('Target', courseForm.target)
        vPar.setStr('GroupIDs', courseForm.groupIDs.join(','))
        vPar.setStr('TagIDs', courseForm.tagIDs.join(','))
        vPar.setStr('UsesTo', courseForm.usesTo)
        vPar.setStr('PicFile', courseForm.picFile)
        addLearnBook(vPar).then(vPar => {
          this.$message.success('保存课程基本信息成功')
          this.$router.replace({ name: 'CourseOperate', params: { id: vPar.getStr('ID') }})
          this.routeParams.id = vPar.getStr('ID')
          setTimeout(() => {
            this.$nextTick(() => {
              this.activeName = '2'
            })
          }, 1000)
        })
      } else { // 修改
        const vPar = new this.ParamArr()
        vPar.setStr('ID', courseForm.id)
        vPar.setStr('Name', courseForm.name)
        vPar.setStr('Remark', courseForm.remark)
        vPar.setStr('Target', courseForm.target)
        vPar.setStr('GroupIDs', courseForm.groupIDs.join(','))
        vPar.setStr('TagIDs', courseForm.tagIDs.join(','))
        vPar.setStr('UsesTo', courseForm.usesTo)
        vPar.setStr('PicFile', courseForm.picFile)
        setLearnBook(vPar).then(vPar => {
          this.$message.success('保存课程基本信息成功')
          setTimeout(() => {
            this.$nextTick(() => {
              this.activeName = '2'
            })
          }, 1000)
        })
      }
    },
    // 获取章节列表
    getBookList(vPar) {
      const nodes = []
      const table = new this.SQLTable(vPar.getTable('k_learn_book_list'))
      table.first()
      while (!table.eof()) {
        const node = {}
        node['id'] = table.getValueByName('ListID')
        node['text'] = table.getValueByName('Name')
        node['name'] = table.getValueByName('Name')
        node['remark'] = table.getValueByName('Remark')
        node['icon'] = 'icon-wenbenmoban'
        nodes.push(node)
        table.next()
      }
      this.treeData = nodes
      if (nodes.length) {
        nodes[0].active = true
        this.courseForm.listID = nodes[0].id
        this.courseForm.list = nodes[0]
      } else {
        this.courseForm.listID = ''
        this.courseForm.list = {}
      }
    },
    // 获取章节视频
    getVideoList(vPar) {
      const nodes = []
      const table = new this.SQLTable(vPar.getTable('k_learn_book_detail'))
      table.first()
      while (!table.eof()) {
        const node = {}
        node['id'] = table.getValueByName('DetailID')
        node['listID'] = table.getValueByName('ListID')
        node['name'] = table.getValueByName('Name')
        node['filePath'] = table.getValueByName('FilePath')
        node['fileName'] = table.getValueByName('FileName')
        node['fileTime'] = table.getValueByName('FileTime')
        nodes.push(node)
        table.next()
      }
      this.allVideoData = nodes
      // console.log(this.allVideoData)

      this.videoData = this.allVideoData.filter(it => it.listID === this.courseForm.listID)
    },
    // 删除分类/标签
    tagClose(type, item) {
      switch (type) {
        case 'type':
          {
            const groups = this.courseForm.groups
            const groupIDs = this.courseForm.groupIDs
            this.courseForm.groups = groups.filter(it => item.id !== it.id)
            this.courseForm.groupIDs = groupIDs.filter(id => item.id !== id)
          }
          break
        case 'tag':
          {
            const tags = this.courseForm.tags
            const tagIDs = this.courseForm.tagIDs
            this.courseForm.tags = tags.filter(it => item.id !== it.id)
            this.courseForm.tagIDs = tagIDs.filter(id => item.id !== id)
          }
          break
      }
    },
    // 新建章节
    openNewSection() {
      this.inputDialogParams.title = '新增章节'
      this.inputDialogParams.label = '章节名称'
      this.inputDialogParams.maxlength = 50
      this.inputDialogParams.value = ''
      this.inputDialogParams.visible = true
      this.$nextTick(() => {
        this.$refs['input-dialog'].$refs['name0'][0].focus()
      })
      this.inputDialogParams.confirm = (form) => {
        const vPar = new this.ParamArr()
        vPar.setStr('BookID', this.courseForm.id)
        vPar.setStr('Name', form.name)
        vPar.setStr('Remark', '')
        addBookList(vPar).then(vPar => {
          const node = {
            bookID: vPar.getStr('BookID'),
            id: vPar.getStr('ID'),
            text: vPar.getStr('Name'),
            name: vPar.getStr('Name'),
            remark: vPar.getStr('Remark'),
            sort: vPar.getInt('Sort'),
            icon: 'icon-wenbenmoban'
          }
          this.treeData.push(node)
          this.inputDialogParams.visible = false
          this.selectBookList(node)
        })
      }
    },
    // 打开课件上传
    openUpload() {
      if (!this.courseForm.listID) return this.$message.warning('请勾选需要上传的章节')
      this.uploadParams.visible = true
      this.uploadParams.fileLists = this.videoData
      this.uploadParams.percentage = 0
      this.uploadParams.confirm = async(fileList) => {
        for (let i = 0; i < fileList.length; i++) {
          this.uploadParams.percentage = Math.floor((i / fileList.length) * 100)
          // eslint-disable-next-line require-atomic-updates
          fileList[i].serverFile = await this.uploadVideo(fileList[i]) // 视频地址
          // eslint-disable-next-line require-atomic-updates
          fileList[i].duration = Math.ceil(await this.getVideoTotleTime(fileList[i])) // 时长
        }
        // 关联文件到章节
        this.associatedFile(fileList)
      }
    },
    // 关联文件到章节
    async associatedFile(fileList) {
      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i]
        await this.asyncUpload(file)
        // 关闭上传弹框
        if (i === (fileList.length - 1)) {
          this.uploadParams.percentage = 100
          setTimeout(() => {
            this.uploadParams.visible = false
          }, 500)
        }
      }
    },
    // 异步关联文件
    asyncUpload(file) {
      return new Promise((res, rej) => {
        const vPar = new this.ParamArr()
        vPar.setStr('BookID', this.courseForm.id)
        vPar.setStr('ListID', this.courseForm.listID)
        vPar.setStr('Name', file.name)
        vPar.setStr('FileName', file.name)
        vPar.setStr('FilePath', file.serverFile)
        vPar.setInt('FileTime', Math.ceil(file.duration)) // 不需要小数点
        if (!this.courseForm.id) return this.$message.error('没有课程id')
        if (!this.courseForm.listID) return this.$message.error('没有章节id')
        addBookDetail(vPar).then(vPar => {
          const fileParams = {
            name: file.name,
            fileName: file.name,
            filePath: file.serverFile,
            fileTime: Math.ceil(file.duration)
          }
          // 回显数据
          const node = {
            id: vPar.getStr('ID'),
            listID: vPar.getStr('ListID'),
            bookID: vPar.getStr('BookID'),
            Sort: vPar.getInt('Sort'),
            name: fileParams.name,
            filePath: fileParams.filePath,
            fileName: fileParams.fileName,
            fileTime: fileParams.fileTime
          }
          this.videoData.push(node)
          this.allVideoData.push(node)
          res()
        }).catch(err => {
          rej(err)
        })
      })
    },
    // 上传课件
    uploadVideo(file) {
      return new Promise((res, rej) => {
        const vPar = new this.ParamArr()
        vPar.setStr('ID', this.courseForm.id)
        vPar.setStr('FileName', this.courseForm.list.name + '/' + file.name)
        addLearnBookFile(vPar, file).then(vPar => {
          const ServerFile = vPar.getStr('ServerFile')
          res(ServerFile)
        })
      })
    },
    // 获取视频文件时长(返回多少秒)
    getVideoTotleTime(fileVIdeo) {
      return new Promise((res, rej) => {
        const url = URL.createObjectURL(fileVIdeo)
        const audioElement = new Audio(url)
        audioElement.addEventListener('loadedmetadata', function(_event) {
          const duration = audioElement.duration
          // console.log('视频时长：' + duration + '秒')
          res(duration)
        })
      })
    },
    // 章节操作
    bookListOperate(type) {
      const item = this.courseForm.list
      switch (type) {
        case 'edit':
          this.inputDialogParams.title = '修改章节'
          this.inputDialogParams.label = '章节名称'
          this.inputDialogParams.value = item.name
          this.inputDialogParams.visible = true
          this.$nextTick(() => {
            this.$refs['input-dialog'].$refs['name0'][0].focus()
          })
          this.inputDialogParams.confirm = (form) => {
            const vPar = new this.ParamArr()
            vPar.setStr('ID', item.id)
            vPar.setStr('Name', form.name)
            setBookList(vPar).then(vPar => {
              this.treeData.forEach(item => {
                if (item.id === vPar.getStr('ID')) {
                  this.$set(item, 'name', form.name)
                  this.$set(item, 'text', form.name)
                  this.courseForm.list = item
                  this.courseForm.listID = item.id

                  this.inputDialogParams.visible = false
                }
              })
            })
          }
          break
        case 'del':
          this.$comfirmDialog({
            message: `是否删除"${item.name}"?`,
            confirm: () => {
              const vPar = new this.ParamArr()
              vPar.setStr('ID', item.id)
              delBookList(vPar).then(vPar => {
                this.initWindow()
              })
            }
          })
          break
      }
    },
    // 删除课件
    delBookList(item) {
      this.$comfirmDialog({
        message: `是否删除"${item.name}"?`,
        confirm: () => {
          const vPar = new this.ParamArr()
          vPar.setStr('ID', item.id)
          delBookDetail(vPar).then(vPar => {
            this.allVideoData = this.allVideoData.filter(it => item.id !== it.id)
            this.videoData = this.videoData.filter(it => item.id !== it.id)
          })
        }
      })
    },
    // 章节点击
    selectBookList(item) {
      this.treeData.forEach(it => {
        if (item.id === it.id) {
          this.$set(it, 'active', true)
        } else {
          this.$set(it, 'active', false)
        }
      })
      // 筛选数据
      this.courseForm.list = item
      this.courseForm.listID = item.id
      this.videoData = this.allVideoData.filter(it => it.listID === this.courseForm.listID)
    },
    // 提交
    submit() {
      const vPar1 = new this.ParamArr()
      vPar1.setInt('Count', this.treeData.length)
      this.treeData.forEach((item, index) => {
        vPar1.setStr(`ID_${index}`, item.id)
      })
      const vPar2 = new this.ParamArr()
      vPar2.setInt('Count', this.videoData.length)
      this.videoData.forEach((item, index) => {
        vPar2.setStr(`ID_${index}`, item.id)
      })
      // 保存章节排序
      setBookListSort(vPar1).then(vPar => {})
      // 保存课件排序
      setBookDetailSort(vPar2).then(vPar => {})
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.save-btn {
  margin-left: 5px;
  width: 120px;
  height: 30px;
  border: none;
  box-shadow: none;
  background: rgba(22, 155, 213, 1);
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
	background-color: $primaryColor;
}
.chapter-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid #E4E7ED;
}
.upload-class {
  height: 61.16px;
  display: flex;
  align-items: center;
  justify-content: end;
  border-bottom: 1px solid #E4E7ED;
}
.menu-wrapper {
  padding-top: 10px;
}
.menu-list {
  color: #333;
  border-width: 0px;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: rgba(61, 109, 234, 0.1);
  font-size: 14px;
  border: none;
  padding: 0 10px ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .menu-tool {
    i {
      cursor: pointer;
    }
  }
}
.video-list {
  padding: 0;
  margin: 0;
  li {
    cursor: move;
    width: 100%;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    &:hover {
      background: #f1f1f1;
    }
    span {
      font-size: 13px;
    }
  }
}
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: cover;
  }

  // 拖拽树样式
  .compTree {
    font-size: 13px;
    color: #333;
    padding: 6px;
    // background-color: #fdfdfd;
    border-bottom: solid 1px #eee;
    display: flex;
    justify-content: space-between;
    >span:first-child {
      flex: 1;
    }
    .tuozhuai {
      display: none;
    }
    &.active {
      background:rgba(61, 109, 234, 0.1);
    }
    &:hover {
      .tuozhuai {
        display: block;
        cursor: move;
      }
    }
  }
  .compTree:hover {
    background-color:rgba(61, 109, 234, 0.1);
  }
  .compTreeChosen {
    border: solid 1px #3089dc !important;
  }
</style>
